<template>
  <nav
    class="w-220 box-border border-r border-r-solid border-border-DEFAULT p-10 py-6"
  >
    <div class="flex mb-14">
      <el-input placeholder="搜索">
        <template #prefix>
          <el-icon>
            <Search></Search>
          </el-icon>
        </template>
      </el-input>
      <el-button class="w-30 ml-10">
        <template #icon>
          <el-icon> <DArrowLeft></DArrowLeft> </el-icon>
        </template>
      </el-button>
    </div>

    <el-menu
      :default-active="route.name"
      :default-openeds="opens"
      class="f-menu"
      @select="onMenuSelect"
    >
      <template v-for="menu in menus">
        <el-sub-menu
          :index="menu.key"
          v-if="menu.children && menu.children.length > 0"
        >
          <template #title>
            <el-icon :class="menu.icon"> </el-icon>
            <span>{{ menu.label }}</span>
          </template>

          <el-menu-item-group>
            <el-menu-item :index="item.key" v-for="item in menu.children">
              <el-icon :class="item.icon"></el-icon>
              <span>{{ item.label }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </template>
    </el-menu>
  </nav>
</template>
<script setup lang="ts">
import { Search, ArrowLeft, DArrowLeft } from "@element-plus/icons-vue";
import { MenuItem } from "@/store";

const route = useRoute();
const router = useRouter();

defineProps<{
  menus: MenuItem[];
}>();

const opens = computed(() => {
  return route.meta.parentKey ? [route.meta.parentKey] : [];
});

function onMenuSelect(index: string) {
  router.push({
    name: index,
  });
}
</script>

<style lang="scss">
.f-menu {
  &.el-menu {
    background-color: transparent;
    border-right: 0;
  }
  .el-menu-item-group__title {
    display: none;
  }
}
</style>
